<template>
    <!-- 人员管理-首页 -->
    <div class="index">
        <div class="map">
            <div id="container" class="container"></div>
            <div class="switch">
                <div class="item" style="white-space:nowrap">
                    <el-radio-group v-model="fenceActive">
                        <el-radio :label="item.id" v-for="(item , index) in typeList" :key="index">{{item.name}}</el-radio>
                    </el-radio-group>
                </div>
                <div class="item fence" v-if="fenceActive == 1">
                    <el-select v-model="fenceId" style="width:100%" placeholder="电子围栏:全部" @change="getFenceIdFn">
                        <el-option v-for="(item,index) in fenceIdList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                    <input type="password" autocomplete="new-password" style="display: none" />
                </div>
            </div>
            <div class="mach" >
                <el-collapse accordion >
                    <el-collapse-item>
                        <template slot="title">
                            <div class="title">
                                <span>人员列表</span>
                            </div>
                        </template>
                        <div class="top">
                            <div class="content">
                                <el-select v-model="groupId" style="width:100%" placeholder="班组:全部" @change="getChange">
                                    <el-option v-for="item in groupList" :key="item.groupId" :label="item.groupName" :value="item.groupId"></el-option>
                                </el-select>
                                <el-input v-model="workCode" placeholder="人员姓名搜索"  style="width:100%;margin-top:10px">
                                    <el-button slot="append" icon="el-icon-search" @click="getSearch"></el-button>
                                </el-input>
                                <input type="password" autocomplete="new-password" style="display: none" />
                            </div>
                        </div>
                        <div class="bottom">
                            <ul v-if="workArray.length>0">
                                <li v-for="(item,index) in workArray" :key="index" @click="getMoreEmp(item,index)" :class="{link_active: item.empId==y}">
                                    <div style="width:95%">
                                        <img :src="item.icon" />
                                        <span style="margin-right:10px; width:100px; margin-left:50px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;" :title="item.groupName?item.groupName:'--'">{{item.groupName?item.groupName:'--'}}</span>
                                        <span style="max-width:90px;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;" :title="item.empName">{{item.empName}}</span>
                                    </div>
                                </li>
                            </ul>
                            <div v-else class="no_data">暂无数据</div>
                        </div>
                    </el-collapse-item>
                </el-collapse>
            </div>
            <!-- <Modal v-model="detailsModal" title="人员详情" :mask-closable="false" width="1100px;" :footer-hide="true" @on-visible-change="changeVisible"> -->
            <el-dialog title="人员详情" :visible.sync="detailsModal" width="1100px;" :close-on-click-modal="false">
                <div class="titles" style="margin-top:-10px" v-if="detailsModal">
                    <Tabs v-model="tabActiveName">
                        <TabPane label="人员信息" name="1">
                            <div class="update">
                                <div class="left">
                                    <div class="tags" style="margin-bottom:10px">
                                        <div class="title">
                                            <h2>基本信息</h2>
                                        </div>
                                        <div class="list">
                                            <div class="item">
                                                <span class="span1">证件类别:</span>
                                                <span class="spanbox" v-if="detailsObj.cardType==1">居民身份证</span>
                                                <span class="spanbox" v-if="detailsObj.cardType==2">澳门永久居民证</span>
                                                <span class="spanbox" v-if="detailsObj.cardType==3">澳门非永久居民证</span>
                                                <span class="spanbox" v-if="detailsObj.cardType==4">澳门外地雇员身份识别证</span>
                                                <span class="spanbox" v-if="detailsObj.cardType==5">澳门特别逗留证</span>
                                            </div>
                                            <div class="item">
                                                <span class="span1">联系电话:</span>
                                                <span class="spanbox">{{detailsObj.phone || "-"}}</span>
                                            </div>
                                        </div>
                                        <div class="list">
                                            <div class="item">
                                                <span class="span1">姓名:</span>
                                                <span class="spanbox">{{detailsObj.empName || "-"}}</span>
                                            </div>
                                            <div class="item">
                                                <span class="span1">学历:</span>
                                                <span class="spanbox" v-if="detailsObj.education==1">博士后</span>
                                                <span class="spanbox" v-if="detailsObj.education==2">博士</span>
                                                <span class="spanbox" v-if="detailsObj.education==3">研究生</span>
                                                <span class="spanbox" v-if="detailsObj.education==4">硕士</span>
                                                <span class="spanbox" v-if="detailsObj.education==5">本科</span>
                                                <span class="spanbox" v-if="detailsObj.education==6">大专</span>
                                                <span class="spanbox" v-if="detailsObj.education==7">中专</span>
                                                <span class="spanbox" v-if="detailsObj.education==8">高中</span>
                                                <span class="spanbox" v-if="detailsObj.education==9">专科及以下学历</span>
                                                <span class="spanbox" v-if="detailsObj.education==10">其他</span>
                                                <span class="spanbox" v-if="!detailsObj.education">-</span>
                                            </div>
                                        </div>
                                        <div class="list">
                                            <div class="item" >
                                                <span class="span1">性别:</span>
                                                <span v-if="detailsObj.gender == 1" >男</span>
                                                <span v-if="detailsObj.gender == 2" >女</span>
                                            </div>
                                            <div class="item">
                                                <span class="span1">学位:</span>
                                                <span class="spanbox" v-if="detailsObj.degree==1">博士后学位</span>
                                                <span class="spanbox" v-if="detailsObj.degree==2">博士学位</span>
                                                <span class="spanbox" v-if="detailsObj.degree==3">硕士学位</span>
                                                <span class="spanbox" v-if="detailsObj.degree==4">学士学位</span>
                                                <span class="spanbox" v-if="detailsObj.degree==5">无学位</span>
                                                <span class="spanbox" v-if="detailsObj.degree==6">其他</span>
                                                <span class="spanbox" v-if="!detailsObj.degree">-</span>
                                            </div>
                                        </div>
                                        <div class="list" v-if="detailsObj.cardType == 1">
                                            <div class="item" style="width:100%">
                                                <span class="span1">民族:</span>
                                                <span style="width:512px">{{detailsObj.nation || "-"}}</span>
                                            </div>
                                        </div>
                                        <div class="list">
                                            <div class="item" >
                                                <span class="span1">年龄:</span>
                                                <span class="spanbox">{{age || "-"}}</span>
                                            </div>
                                        </div>
                                        <div class="list" v-if="detailsObj.cardType == 5">
                                            <div class="item" style="width:100%">
                                                <span class="span1">签发地点:</span>
                                                <span style="width:512px">{{detailsObj.idCardGrantOrg || "-"}}</span>
                                            </div>
                                        </div>
                                        <div class="list">
                                            <div class="item" style="width:100%">
                                                <span class="span1">身份证号:</span>
                                                <span style="width:512px">{{detailsObj.idCardNo || "-"}}</span>
                                            </div>
                                        </div>
                                        <div class="list" v-if="detailsObj.cardType == 1">
                                            <div class="item" style="width:100%">
                                                <span class="span1">住址:</span>
                                                <span style="width:512px">{{detailsObj.address || "-"}}</span>
                                            </div>
                                        </div>
                                        <div class="list">
                                            <div class="item" style="width:100%;">
                                                <span class="span1">有效期:</span>
                                                <span style="width:512px">{{detailsObj.idCardStartDate}}-{{detailsObj.idCardEndDate}}</span>
                                            </div>
                                        </div>
                                        <div class="list" v-if="detailsObj.cardType == 1">
                                            <div class="item">
                                                <span class="span1">发证机关:</span>
                                                <span class="spanbox">{{detailsObj.idCardGrantOrg || "-"}}</span>
                                            </div>
                                        </div>
                                        <div class="list" v-if="detailsObj.cardType != 1 ">
                                            <div class="item">
                                                <span class="span1">工作证有效期:</span>
                                                <span class="spanbox">{{detailsObj.workCardEndDate || "-"}}</span>

                                            </div>
                                            <div class="item">
                                                <span class="span1">工作证编号:</span>
                                                <span class="spanbox">{{detailsObj.workCardNo || "-"}}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tags" >
                                        <div class="title">
                                            <h2>项目信息</h2>
                                        </div>
                                        <div class="list">
                                            <div class="item" >
                                                <span class="span1">班组:</span>
                                                <span class="spanbox">{{detailsObj.groupName}}</span>
                                            </div>
                                            <div class="item" >
                                                <span class="span1">工号:</span>
                                                <el-tooltip class="item" :content="detailsObj.empCode" placement="top-start" v-if="detailsObj.empCode&&detailsObj.empCode!=''">
                                                    <span class="spanbox">
                                                        {{detailsObj.empCode}}
                                                    </span>
                                                </el-tooltip>
                                                <span v-else class="spanbox">-</span>
                                            </div>
                                        </div>
                                        <div class="list">
                                            <div class="item">
                                                <span class="span1">工人类型:</span>
                                                <span class="spanbox">{{detailsObj.workRoleName}}</span>
                                            </div>
                                            <div class="item">
                                                <span class="span1">岗位/工种:</span>
                                                <span class="spanbox">{{detailsObj.workTypeName}}</span>
                                            </div>
                                        </div>
                                        <div class="list">
                                            <div class="item" v-if="detailsObj.workRoleId == 2">
                                                <span class="span1">否是班组长:</span>
                                                <span class="spanbox" v-if="detailsObj.leaderFlag ==1">是</span>
                                                <span class="spanbox" v-if="detailsObj.leaderFlag ==0">否</span>
                                            </div>
                                            <div class="item" v-if="detailsObj.postState == 1">
                                                <span class="span1">安全帽编码:</span>
                                                <span class="spanbox">{{detailsObj.sn || "-"}}</span>
                                            </div>

                                        </div>
                                        <div class="list" >
                                            <div class="item">
                                                <span class="span1">入职时间:</span>
                                                <span class="spanbox">{{detailsObj.enterTime || "-"}}</span>
                                            </div>
                                            <div class="item" v-if="detailsObj.postState == 2">
                                                <span class="span1">离职时间:</span>
                                                <span class="spanbox">{{detailsObj.outerTime || "-"}}</span>
                                            </div>
                                        </div>
                                        <!-- <div class="list">
                                            <div class="item">
                                                <span class="span1 spanActive">是否通过入场三级教育:</span>
                                                <span class="spanbox" v-if="detailsObj.passFlag ==1">是</span>
                                                <span class="spanbox" v-if="detailsObj.passFlag ==0">否</span>
                                            </div>
                                        </div> -->
                                    </div>
                                </div>
                                <div class="right" style="margin-top:0px;height:740px">
                                    <div class="tags" style="height:100%">
                                        <div class="userInfoPicture">
                                            <div class="userImage">
                                                <el-image
                                                    style="width: 120px; height: 120px;border-radius:6px;"
                                                    :src="detailsObj.avatar == '' ? crew.src : detailsObj.avatar"
                                                    :preview-src-list="[detailsObj.avatar == '' ? crew.src : detailsObj.avatar]"
                                                    :z-index="6000">
                                                </el-image>
                                            </div>
                                            <!-- <div class="userCode">
                                                <img :src="qrCodeSrc"/>
                                                <el-button
                                                    @click="downloadQRCode"
                                                    type="primary"
                                                    size="small"
                                                    plain
                                                    >下载二维码</el-button>
                                            </div> -->
                                        </div>
                                        <div class="card_msg">
                                            <div class="item">
                                                <div class="u_cord" v-if="detailsObj.idCardFront">
                                                    <img :src="detailsObj.idCardFront"  @click.stop="previewImgShow(detailsObj.idCardFront)"/>
                                                </div>
                                            </div>
                                            <div class="item" v-if="CertificateType != 5 && detailsObj.idCardBack">
                                                <div class="u_cord">
                                                    <img :src="detailsObj.idCardBack"  @click.stop="previewImgShow(detailsObj.idCardBack)"/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </TabPane>
                        <TabPane label="安全帽视频" name="11" v-if="fvsHelmetSN">
                            <div id="live_video"></div>
                        </TabPane>
                        <TabPane label="合同信息" v-if="btnList.includes('emp/contract/btn')" name="2">
                            <el-table :data="contractList" style="width: 100%;margin-top:20px" height="500" border :header-cell-style="headClass" :stripe='true'>
                                <el-table-column prop="state" label="合同状态">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.state == 0" size="small">未签订</span>
                                        <span v-if="scope.row.state == 1" size="small">已签订</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="contractNo" label="合同编号"></el-table-column>
                                <el-table-column prop="certCode" label="合同期限">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.contactType == 0" size="small">固定期限</span>
                                        <span v-if="scope.row.contactType == 1" size="small">固定工作量</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="有效期日期" width="200px">
                                    <template slot-scope="scope">
                                        <span>{{scope.row.startDate}}至{{scope.row.endDate}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column  label="工资核定方式">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.payType == 1" size="small">按小时</span>
                                        <span v-if="scope.row.payType == 2" size="small">按天</span>
                                        <span v-if="scope.row.payType == 3" size="small">按月</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="salary" label="单价"></el-table-column>
                                <el-table-column prop="fileNo" label="附件数"></el-table-column>
                            </el-table>
                        </TabPane>
                        <TabPane label="资格证书" v-if="btnList.includes('emp/cert/btn')"  name="3">
                            <el-table :data="cretList" style="width: 100%;margin-top:20px" height="500" border :header-cell-style="headClass" :stripe='true'>
                                <el-table-column prop="certName" label="证书名称"></el-table-column>
                                <el-table-column prop="certCode" label="证书编号"></el-table-column>
                                <el-table-column prop="certStartDate" label="发证日期"></el-table-column>
                                <el-table-column prop="certExpireDate" label="证件有效期"></el-table-column>
                                <el-table-column prop="certGrantOrg" label="发证机关"></el-table-column>
                                <el-table-column prop="fileAttachList" label="附件图片" width="200px">
                                    <template slot-scope="scope">
                                        <template v-if="scope.row.imgAll && scope.row.imgAll.length > 0">
                                            <viewer :images="scope.row.imgAll">
                                                <img
                                                    :style="{width:'45px',height:'45px','margin-right':'5px','cursor': 'pointer'}"
                                                    v-for="(src,index) in scope.row.imgAll"
                                                    :src="src"
                                                    :key="index"
                                                />
                                            </viewer>
                                        </template>
                                        <span v-else>—</span>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </TabPane>
                        <TabPane label="银行账号" v-if="btnList.includes('emp/bank/btn')" name="4">
                            <el-table :data="bankList" style="width: 100%;margin-top:20px" border height="500" :header-cell-style="headClass" :stripe='true'>
                                <el-table-column prop="bankType" label="银行名称"></el-table-column>
                                <el-table-column prop="bankName" label="开户行"></el-table-column>
                                <el-table-column prop="bankNumber" label="银行卡号"></el-table-column>
                                <el-table-column label="状态" >
                                    <template slot-scope="scope">
                                        <span v-if="!scope.row.enableFlag" size="small">停用</span>
                                        <span v-if="scope.row.enableFlag" size="small">在用</span>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </TabPane>
                        <TabPane label="工资记录" v-if="btnList.includes('emp/payroll/btn')" name="5">
                            <el-table :data="payrollList" style="width: 100%;margin-top:20px" border height="500" :header-cell-style="headClass" :stripe='true'>
                                <el-table-column prop="date" label="发放日期"></el-table-column>
                                <el-table-column prop="bankNumber" label="银行卡号"></el-table-column>
                                <el-table-column prop="salaryTotal" label="工资总额"></el-table-column>
                                <el-table-column prop="salaryShould" label="应发工资"></el-table-column>
                                <el-table-column prop="salaryReal" label="实发工资"></el-table-column>
                                <el-table-column prop="remark" label="备注"></el-table-column>
                                <el-table-column prop="imgUrlList" label="工资图片" width="200px">
                                    <template slot-scope="scope">
                                        <template v-if="scope.row.imgUrlList && scope.row.imgUrlList.length > 0">
                                            <viewer :images="scope.row.imgUrlList">
                                                <img
                                                    :style="{width:'45px',height:'45px','margin-right':'5px','cursor': 'pointer'}"
                                                    v-for="(src,index) in scope.row.imgUrlList"
                                                    :src="src"
                                                    :key="index"
                                                />
                                            </viewer>
                                        </template>
                                        <span v-else>—</span>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </TabPane>
                        <TabPane label="奖惩记录" v-if="btnList.includes('emp/reward/btn')" name="6">
                            <el-table :data="rewardList" style="width: 100%" border height="500" :header-cell-style="headClass" :stripe='true'>
                                <el-table-column prop="date" label="发生时间"></el-table-column>
                                <el-table-column prop="type" label="奖惩类型">
                                    <template slot-scope="scope">
                                        <el-tag type="success" v-if="scope.row.type == 1" size="small">奖励</el-tag>
                                        <el-tag type="info" v-if="scope.row.type == 2" size="small">惩罚</el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="item" label="奖惩记录分类">
                                    <template slot-scope="scope">
                                        <el-tag type="success" v-if="scope.row.item == 1" size="small">火电气</el-tag>
                                        <el-tag type="success" v-if="scope.row.item == 2" size="small">气瓶</el-tag>
                                        <el-tag type="success" v-if="scope.row.item == 3" size="small">特种作业证</el-tag>
                                        <el-tag type="success" v-if="scope.row.item == 4" size="small">悬空作业</el-tag>
                                        <el-tag type="success" v-if="scope.row.item == 5" size="small">高处作业</el-tag>
                                        <el-tag type="success" v-if="scope.row.item == 6" size="small">翻斗车</el-tag>
                                        <el-tag type="success" v-if="scope.row.item == 7" size="small">安全帽</el-tag>
                                        <el-tag type="success" v-if="scope.row.item == 8" size="small">安全带</el-tag>
                                        <el-tag type="success" v-if="scope.row.item == 9" size="small">国家级</el-tag>
                                        <el-tag type="success" v-if="scope.row.item == 10" size="small">省级</el-tag>
                                        <el-tag type="success" v-if="scope.row.item == 11" size="small">市级</el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="description" label="描述"></el-table-column>
                            </el-table>
                        </TabPane>
                        <TabPane label="培训记录" v-if="btnList.includes('emp/train/btn')" name="7">
                            <el-table :data="trainList" style="width: 100%" height="500" border :header-cell-style="headClass" :stripe='true'>
                                <el-table-column prop="name" label="培训名称"></el-table-column>
                                <el-table-column prop="trainTypeName" label="培训类型"></el-table-column>
                                <el-table-column prop="date" label="培训日期"></el-table-column>
                                <el-table-column prop="address" label="培训地点" width="180px">
                                    <template slot-scope="scope">
                                        <Tooltip transfer :content="scope.row.address" placement="top-start" max-width='200'>
                                            <div class="p" style="width:180px;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;cursor: pointer;">
                                                {{scope.row.address}}
                                            </div>
                                        </Tooltip>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="score" label="培训成绩"></el-table-column>
                                <el-table-column prop="passFlag" label="是否合格">
                                    <template slot-scope="scope">
                                        <p>{{scope.row.passFlag == 1 ? '合格' : '不合格'}}</p>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="imgUrlList" label="成绩图片" width="200px">
                                    <template slot-scope="scope">
                                        <template v-if="scope.row.imgUrlList && scope.row.imgUrlList.length > 0">
                                            <viewer :images="scope.row.imgUrlList">
                                                <img
                                                    :style="{width:'45px',height:'45px','margin-right':'5px','cursor': 'pointer'}"
                                                    v-for="(src,index) in scope.row.imgUrlList"
                                                    :src="src"
                                                    :key="index"
                                                />
                                            </viewer>
                                        </template>
                                        <span v-else>—</span>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div class="clearfix" v-show="trainList.length>0" style="margin: 20px auto; display: flex;justify-content: center;">
                                <div class="float-right">
                                    <Page v-if="totalCount_train" :current.sync="current_train" :total="totalCount_train" :page-size="pageSize_train" show-elevator show-total  @on-change="pageChange_train"></Page>
                                </div>
                            </div>
                        </TabPane>
                        <TabPane label="安全交底" v-if="btnList.includes('emp/confess/btn')" name="8">
                            <div class="table">
                                <el-table :data="confessList" style="width: 100%" height="500" border :header-cell-style="headClass" :stripe='true'>
                                    <el-table-column prop="projectName" label="工程名称" :show-overflow-tooltip="true">
                                        <template slot-scope="scope">
                                            <span style="cursor: pointer">{{ scope.row.projectName ? scope.row.projectName : "—"}}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="date" label="交底日期" :show-overflow-tooltip="true">
                                        <template slot-scope="scope">
                                            <span style="cursor: pointer">{{ scope.row.date ? scope.row.date : "—"}}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="corpName" label="施工单位" :show-overflow-tooltip="true">
                                        <template slot-scope="scope">
                                            <span style="cursor: pointer">{{ scope.row.corpName ? scope.row.corpName : "—"}}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="confidantName" label="交底人">
                                        <template slot-scope="scope">
                                            {{ scope.row.confidantName ? scope.row.confidantName : "—"}}
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="beConfidantName" label="被交底人">
                                        <template slot-scope="scope">
                                            {{ scope.row.beConfidantName ? scope.row.beConfidantName : "—"}}
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="imgUrlList" label="图片" width="200px">
                                        <template slot-scope="scope">
                                            <template v-if="scope.row.imgUrlList && scope.row.imgUrlList.length > 0">
                                                <viewer :images="scope.row.imgUrlList">
                                                    <!-- <img
                                                        :style="{width:'45px',height:'45px','margin-right':'5px','cursor': 'pointer'}"
                                                        v-for="(src,index) in scope.row.imgUrlList"
                                                        :src="src"
                                                        :key="index"
                                                    /> -->
                                                    <el-link v-for="(src, index) in scope.row.imgUrlList" :key="index" target="_blank" :href="src" type="primary" >{{index!=0?'、':''}}查看</el-link>
                                                </viewer>
                                            </template>
                                            <span v-else>—</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="signImgUrl" label="签名图片">
                                        <template slot-scope="scope">
                                            <template v-if="scope.row.signImgUrl">
                                                <viewer :images="[scope.row.signImgUrl]">
                                                    <img :style="{width:'45px',height:'45px','margin-right':'5px','cursor': 'pointer'}" :src="scope.row.signImgUrl" />
                                                </viewer>
                                            </template>
                                            <template v-else>
                                                <span>—</span>
                                            </template>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                            <div class="clearfix" v-show="confessList.length>0" style="margin: 20px auto; display: flex;justify-content: center;">
                                <div class="float-right">
                                    <Page v-if="totalCount_confess" :current.sync="current_confess" :total="totalCount_confess" :page-size="pageSize_confess" show-elevator show-total  @on-change="pageChange_confess"></Page>
                                </div>
                            </div>
                        </TabPane>
                        <TabPane label="社保及体检信息" v-if="btnList.includes('emp/health/btn')" name="9">
                            <Tabs v-model="healthActive"  @on-click="setHealthTabClick" v-if="tabActiveName==='9'">
                                <TabPane label="社保证明" name="healthCode"></TabPane>
                                <TabPane label="体检报告" name="journeyCard"></TabPane>
                                <!-- <TabPane label="健康码" name="healthCode"></TabPane>
                                <TabPane label="行程卡" name="journeyCard"></TabPane>
                                <TabPane label="核酸记录" name="testRecord"></TabPane>
                                <TabPane label="疫苗接种" name="vaccination"></TabPane> -->
                            </Tabs>
                            <div class="table" v-show="healthActive == 'healthCode'">
                                <el-table :data="healthList" style="width: 100%" height="500" border :header-cell-style="headClass" :stripe='true'>
                                    <el-table-column prop="date" label="更新日期"></el-table-column>
                                    <el-table-column prop="codeState" label="健康状态">
                                        <template slot-scope="scope">
                                            <span v-if="scope.row.codeState == 'green'">绿码</span>
                                            <span v-if="scope.row.codeState == 'red'">红码</span>
                                            <span v-if="scope.row.codeState == 'yellow'">黄码</span>
                                            <span v-if="scope.row.codeState == ''">—</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="imgList" label="图片">
                                        <template slot-scope="scope">
                                            <template v-if="scope.row.imgList && scope.row.imgList.length > 0">
                                                <viewer :images="scope.row.imgList">
                                                    <!-- <img
                                                        :style="{width:'45px',height:'45px','margin-right':'5px','cursor': 'pointer'}"
                                                        v-for="(src,index) in scope.row.imgList"
                                                        :src="src"
                                                        :key="index"
                                                    /> -->
                                                    <el-link v-for="(src, index) in scope.row.imgList" :key="index" target="_blank" :href="src" type="primary" >{{index!=0?'、':''}}查看</el-link>
                                                </viewer>
                                            </template>
                                            <span v-else>—</span>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                            <div class="table" v-show="healthActive == 'journeyCard'">
                                <el-table :data="healthList" style="width: 100%" height="500" border :header-cell-style="headClass" :stripe='true'>
                                    <el-table-column prop="date" label="更新日期"></el-table-column>
                                    <!-- <el-table-column prop="codeState" label="行程卡颜色">
                                        <template slot-scope="scope">
                                            <span v-if="scope.row.codeState == 'green'">绿码</span>
                                            <span v-if="scope.row.codeState == 'red'">红码</span>
                                            <span v-if="scope.row.codeState == 'yellow'">黄码</span>
                                            <span v-if="scope.row.codeState == 'orange'">橙码</span>
                                            <span v-if="scope.row.codeState == ''">—</span>
                                        </template>
                                    </el-table-column> -->
                                    <el-table-column prop="journey" label="说明" :show-overflow-tooltip="true"></el-table-column>
                                    <el-table-column prop="imgList" label="图片">
                                        <template slot-scope="scope">
                                            <template v-if="scope.row.imgList && scope.row.imgList.length > 0">
                                                <viewer :images="scope.row.imgList">
                                                    <img
                                                        :style="{width:'45px',height:'45px','margin-right':'5px','cursor': 'pointer'}"
                                                        v-for="(src,index) in scope.row.imgList"
                                                        :src="src"
                                                        :key="index"
                                                    />
                                                </viewer>
                                            </template>
                                            <span v-else>—</span>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                            <div class="table" v-show="healthActive == 'testRecord'">
                                <el-table :data="healthList" style="width: 100%" height="500" border :header-cell-style="headClass" :stripe='true'>
                                    <el-table-column prop="date" label="检测日期"></el-table-column>
                                    <el-table-column prop="testResult" label="检测结果">
                                        <template slot-scope="scope">
                                            <span v-if="scope.row.testResult == '1'">阴性</span>
                                            <span v-if="scope.row.testResult == '2'">阳性</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="expDate" label="失效日期"></el-table-column>
                                    <el-table-column prop="imgList" label="图片">
                                        <template slot-scope="scope">
                                            <template v-if="scope.row.imgList && scope.row.imgList.length > 0">
                                                <viewer :images="scope.row.imgList">
                                                    <img
                                                        :style="{width:'45px',height:'45px','margin-right':'5px','cursor': 'pointer'}"
                                                        v-for="(src,index) in scope.row.imgList"
                                                        :src="src"
                                                        :key="index"
                                                    />
                                                </viewer>
                                            </template>
                                            <span v-else>—</span>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                            <div class="table" v-show="healthActive == 'vaccination'">
                                <el-table :data="healthList" style="width: 100%" height="500" border :header-cell-style="headClass" :stripe='true'>
                                    <el-table-column prop="firstTime" label="首次接种时间"></el-table-column>
                                    <el-table-column prop="secondTime" label="二次接种时间"></el-table-column>
                                    <el-table-column prop="imgList" label="图片">
                                        <template slot-scope="scope">
                                            <template v-if="scope.row.imgList && scope.row.imgList.length > 0">
                                                <viewer :images="scope.row.imgList">
                                                    <img
                                                        :style="{width:'45px',height:'45px','margin-right':'5px','cursor': 'pointer'}"
                                                        v-for="(src,index) in scope.row.imgList"
                                                        :src="src"
                                                        :key="index"
                                                    />
                                                </viewer>
                                            </template>
                                            <span v-else>—</span>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                            <div class="clearfix" v-show="healthList.length>0" style="margin: 20px auto; display: flex;justify-content: center;">
                                <div class="float-right">
                                    <Page v-if="totalCount_health" :current.sync="current_health" :total="totalCount_health" :page-size="pageSize_health" show-elevator show-total  @on-change="pageChange_health"></Page>
                                </div>
                            </div>
                        </TabPane>
                        <!-- <TabPane label="风险告知" v-if="btnList.includes('emp/risk/btn')" name="10">
                            <el-table :data="riskList" style="width: 100%" height="500" border :header-cell-style="headClass" :stripe='true'>
                                <el-table-column prop="name" label="风险告知书名称">
                                    <template slot-scope="scope">
                                        <div class="p" v-if="scope.row.fileUrl" style="display: flex;justify-content: flex-start;align-items: center;cursor: pointer" @click="download(scope.row.fileUrl,scope.row.name)">
                                            <img  style="width: 20px;height: 20px;" src="./../../assets/images/emp/common/file-word.png" alt="" v-if="wordList.includes(extname(scope.row.fileUrl))">
                                            <img  style="width: 20px;height: 20px;" src="./../../assets/images/emp/common/file-excel.png" alt="" v-else-if="excelList.includes(extname(scope.row.fileUrl))">
                                            <img  style="width: 20px;height: 20px;" src="./../../assets/images/emp/common/file-ppt.png" alt="" v-else-if="pptList.includes(extname(scope.row.fileUrl))">
                                            <img  style="width: 20px;height: 20px;" src="./../../assets/images/emp/common/file-pdf.png" alt="" v-else-if="pdfList.includes(extname(scope.row.fileUrl))">
                                            <img  style="width: 20px;height: 20px;" src="./../../assets/images/emp/common/file-video.png" alt="" v-else-if="videoList.includes(extname(scope.row.fileUrl))">
                                            <img  style="width: 20px;height: 20px;" src="./../../assets/images/emp/common/file-audio.png" v-else-if="audioList.includes(extname(scope.row.fileUrl))" alt="">
                                            <img  style="width: 20px;height: 20px;" src="./../../assets/images/emp/common/file-zip.png" v-else-if="zipList.includes(extname(scope.row.fileUrl))" alt="">
                                            <img  style="width: 20px;height: 20px;" src="./../../assets/images/emp/common/file-txt.png" v-else-if="txtList.includes(extname(scope.row.fileUrl))" alt="">
                                            <span style="color: #1891FF">{{scope.row.name}}</span>
                                        </div>
                                        <div class="p" v-else>
                                            <span>—</span>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="signImgUrl" label="签名图片">
                                    <template slot-scope="scope">
                                        <template v-if="scope.row.signImgUrl">
                                            <viewer :images="[scope.row.signImgUrl]">
                                                <img :style="{width:'45px',height:'45px','margin-right':'5px','cursor': 'pointer'}" :src="scope.row.signImgUrl" >
                                            </viewer>
                                        </template>
                                        <template v-else>
                                            <span>—</span>
                                        </template>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="signTime" label="签名时间"></el-table-column>
                            </el-table>
                            <div class="clearfix" v-show="riskList.length>0" style="margin: 20px auto; display: flex;justify-content: center;">
                                <div class="float-right">
                                    <Page v-if="totalCount_risk" :current.sync="current_risk" :total="totalCount_risk" :page-size="pageSize_risk" show-elevator show-total  @on-change="pageChange_risk"></Page>
                                </div>
                            </div>
                        </TabPane> -->
                    </Tabs>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import {GroupCreate} from "@/mixins/group.js";
import {detailsModal} from "./detailsModal";
import {previewImg} from "@/mixins/previewImg";
import {fileType} from "@/mixins/fileType";

export default {
    mixins:[GroupCreate,detailsModal,previewImg,fileType],
    data() {
        return {
            btnList:[],
            deptId:"",
            lat:"",
            lng:"",
            deptName:"",
            groupId:"",
            y:"",
            workCode:"",
            j:"",
            totalList:[],

        };
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        }
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.lat = val.lng == undefined?30.592335:val.lng;
                this.lng = val.lat == undefined?114.29484:val.lat;
                this.deptName = val.name;
                this.getGRPList(this.deptId);
                this.getIndexMapEmpTabFn();
                if(this.fenceActive == 0){
                    this.getMapEmp();
                }else if(this.fenceActive == 1){
                    this.fenceId = '';
                    this.fenceEmpFlag = false;
                    this.getIndexMapEmpPolyFn();
                }else if(this.fenceActive == 2){
                    this.fvsId = '';
                    this.getFvsListFn();
                }
            }

        },
    },
    beforeDestroy() {
    },
    mounted() {
        this.initDate();
        this.btnList = JSON.parse(localStorage.getItem("arr"));
    },
    methods: {
        getMoreEmp(item,index) {
            // this.mapList = [];
            this.y = item.empId;
            if (!item.lng) {
                this.$Message.warning('暂无人员位置信息');
                return;
            }

            if(this.fenceActive == 0){
                this.getEmpMap(item.lng, item.lat, item.empId);
                this.getEmpDetails(index,this.workArray);
            }else if(this.fenceActive == 1){
                this.fenceIdActive = item.empId;
                this.getEmpDetails(index,this.workArray);
                this.getAreaMap();
            }else if(this.fenceActive == 2) {
                this.getEmpDetails(index,this.workArray);
            }
        },
        initDate(){
            this.deptId = this.$store.state.porjectObject.deptId;
            this.lat = this.$store.state.porjectObject.lat == undefined?30.592335:this.$store.state.porjectObject.lat;
            this.lng = this.$store.state.porjectObject.lng == undefined?114.29484:this.$store.state.porjectObject.lng;
            this.deptName = this.$store.state.porjectObject.name;
            this.getGRPList(this.deptId);
            this.getFenceListFn();
            this.getIndexMapEmpTabFn();
        },

        getChange(item){
            this.groupId = item== 0?'':item;
            this.fenceList = [];
            if(this.fenceActive == 0){
                this.getMapEmp();
            }else if(this.fenceActive == 1){
                this.fenceId = '';
                this.fenceEmpFlag = false;
                this.getIndexMapEmpPolyFn();
            }else if(this.fenceActive == 2){
                this.fvsId = '';
                this.fenceEmpFlag = false;
                this.getFvsListFn();
            }
        },
        getSearch(){
            this.fenceList = [];
            if(this.fenceActive == 0){
                this.getMapEmp();
            }else if(this.fenceActive == 1){
                this.fenceId = '';
                this.fenceEmpFlag = false;
                this.getIndexMapEmpPolyFn();
            }else if(this.fenceActive == 2){
                this.fvsId = '';
                this.fenceEmpFlag = false;
                this.getFvsListFn();
            }
        },
    }
};
</script>
<style lang="less" scoped>
@import "./../../assets/style/themeBase.less";
/deep/ .amap-info-content{
    width: 205px;
    border: 1px solid #fff;
    opacity: 1;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #999;
    text-align: center;
    overflow-y: auto;
    max-height: 112px;
    background: #fff;
    border-radius: 10px;
    &::-webkit-scrollbar {
        width: 6px;
    }
    /*滚动槽*/
    &::-webkit-scrollbar-track {
        box-shadow: inset 0 0 6px #eee;
        -webkit-box-shadow: inset 0 0 6px #eee;
        border-radius: 10px;
    }
    /* 滚动条滑块 */
    &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.1);
        box-shadow: inset 0 0 6px #eee;
        -webkit-box-shadow: inset 0 0 6px #eee;
    }
    &::-webkit-scrollbar-thumb:window-inactive {
        background: #eee;
    }
    .item{
        width: 100%;
        margin-bottom: 8px;
        cursor: pointer;
        &:last-of-type{
            margin-bottom: 0;
        }
        &:hover{
            color: #666;
        }
    }
}
/deep/ .amap-info-sharp{
    border-top:8px solid #fff;
}
.index {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    .map {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        margin: 0 auto;
        align-items: center;
        border-radius: 10px;
        .container {
            width: 100%;
            height: 100%;
        }
        /deep/ .switch{
            position: absolute;
            width: 350px;
            top: 30px;
            right: 30px;
            .item{
                width: 270px;
                height: 42px;
                background-color: #fff;
                margin: auto;
                margin-bottom: 15px;
                padding: 8px 2%;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: var(--themeColor);
                border:1px solid var(--themeColor);
                box-sizing: border-box;
                &.fence{
                    padding: 0;
                    border:none;
                    .el-input__inner{
                        border: none;
                    }
                }
                .ivu-select-visible .ivu-select-selection{
                    box-shadow :none;
                }
                .ivu-select-selection{
                    border: none;
                    font-size: 14px;
                    color: #999999;
                    &:hover{
                        border: none;
                    }
                }
            }
        }
        .mach {
            position: absolute;
            width:350px;
            top:40px;
            left:68px;
            border-radius: 10px;
            // box-shadow: 0px 5px 7px 0px rgba(44, 43, 43, 0.31);
            .title {
                font-size: 16px;
                margin-left: 20px;
                color: var(--themeColor);
            }
            .top {
                width: 100%;
                height: auto;
                // border-top:1px solid #000;
                // border-bottom: 1px solid #000;
                .content {
                    width: 93%;
                    margin: 10px auto;
                    .search {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                    }
                    /deep/.el-input-group__append{
                        border-color: var(--themeColor);
                        background-color: var(--themeColor);
                        i{
                            color: #FFFFFF;
                        }
                    }
                }
            }
            .center {
                width: 100%;
                height: auto;
                // border-bottom: 1px solid #000;
                .ulbox {
                    width: 95%;
                    height: 60px;
                    margin: 10px auto;
                    list-style: none;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    border-top: 1px solid #c5c8ce;
                    border-bottom: 1px solid #c5c8ce;
                    li {
                        margin-right: 10px;
                        cursor: pointer;
                    }
                }
            }
            .bottom {
                width: 100%;
                height: auto;
                ul {
                    width: 100%;
                    list-style: none;
                    height: 300px;
                    overflow-y: scroll;
                    li {
                        width: 95%;
                        margin: 0 auto;
                        margin-top: 5px;
                        padding: 0 5%;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        background: rgba(249, 249, 249, 1);
                        height: 50px;
                        cursor: pointer;
                        div {
                            display: flex;
                            justify-content:flex-start;
                            align-items: center;
                            img {
                                width: 25px;
                                height: 25px;
                            }
                        }
                        .spanbox {
                            width: 150px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                    }
                }
                ul::-webkit-scrollbar {
                    width: 6px;
                }
                /*滚动槽*/
                ul::-webkit-scrollbar-track {
                    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
                    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
                    border-radius: 10px;
                }
                /* 滚动条滑块 */
                ul::-webkit-scrollbar-thumb {
                    border-radius: 10px;
                    background: rgba(0, 0, 0, 0.1);
                    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
                    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
                }
                ul::-webkit-scrollbar-thumb:window-inactive {
                    background: rgba(255, 0, 0, 0.4);
                }
                .no_data {
                    width: 100%;
                    height: 50px;
                    line-height: 50px;
                    text-align: center;
                    font-size: 16px;
                }
            }
        }
        .btn {
            position: absolute;
            top: 30px;
            right: 30px;
            padding:10px;
            background: #e5f5ff;
        }
    }
    .prj {
        width: 96%;
        margin: 0 auto;
        height: 50px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-top: 10px;
        background: #fff;
        border-radius: 5px 5px 0 0;
    }
}
.title {
    width: 90%;
    margin: 0 auto;
    font-size: 18px;
    text-align: center;
}
h2 {
    width: 90%;
    margin: 10px auto;
    color: var(--themeColor) !important;
}
.list {
    width: 80%;
    margin: 10px auto;
    display: flex;
    justify-content: space-between;
    .item {
        width: 33%;
        display: flex;
        justify-content: flex-start;
        span:first-child {
            width: 60px;
        }
    }
}
.active {
    background: var(--themeColor) !important;
    color: #fff !important;
}
.link_active {
    background: var(--themeColor) !important;
    color: #fff!important;
}
.intBox {
    display: none;
}
.info {
    color: red;
}
.amap-info-content .amap-info-outer {
    padding: 0px important;
}
.update {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    // margin-top: -10px;
    .left {
        width: 60%;
        height: auto;
        .title {
            width: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            height: 40px;
            margin-bottom: 10px;
            text-align: left;
            .btn {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin-left: 20px;
            }
        }
        .list {
            width: 96%;
            margin: 0 auto;
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .item {
                width: 49%;
                height: 32px;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                position: relative;
                .spanActive{
                    width: 200px!important;
                }
                .span1 {
                    width:80px;
                }
                .tip {
                    color: red;
                    margin-left: 2px;
                }
                .spanbox {
                    width: 200px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
            }
        }


    }
    .right {
        width: calc(40% - 10px);;
        // margin-top: 40px;
        height: 658px;
        .title{
            width: 100%;
            margin: 0 auto;
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .img_msg {
            width: 100%;
            height: 150px;
            display: flex;
            justify-content: center;
            .art {
                width: 260px;
                margin: 0 auto;
                height: 150px;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                .item {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 20px;
                    position: relative;
                    padding-left: 16px;
                    box-sizing: border-box;
                    .tip {
                        position: absolute;
                        color: red;
                        font-size: 16px;
                        top:8px;
                        left:0;
                    }
                }
                .tp {
                    position: absolute;
                    font-size: 12px;
                    color: red;
                    bottom: -30px;
                    left: 0;
                }
            }
            .photo {
                height: 150px;
                width: 100px;
                display: flex;
                justify-content: center;
                align-items: center;
                .t_box {
                    width: 98px;
                    height: 98px;
                    border-radius: 50%;
                    img {
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                    }
                }
            }
            .rwm {
                height: 150px;
                width: 150px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                img {
                    display: block;
                    width: 120px;
                    height: 120px;
                }
            }
        }
        .card_msg {
            margin-top: 30px;
            display: flex;
            width: 100%;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            .item {
                margin-top: 10px;
                position: relative;
                .u_cord {
                    height: 150px;
                    border: 1px solid #c5c8ce;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    span {
                        font-size: 16px;
                    }
                    img {
                        display: block;
                        width: 100%;
                        height: 100%;
                    }
                }
                /deep/.el-upload {
                    width: 300px;
                    height: 150px;
                    cursor: pointer;
                    position: relative;
                    overflow: hidden;
                }
                /deep/.el-upload-dragger {
                    width: 300px;
                    height: 150px;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
                /deep/ .avatar-uploader-icon {
                    font-size: 28px;
                    color: #8c939d;
                    width: 178px;
                    height: 178px;
                    line-height: 178px;
                    text-align: center;
                }
                /deep/.avatar {
                    width: 300px;
                    height: 150px;
                    display: block;
                }
                /deep/.el-upload__text {
                    line-height: 150px;
                }
            }
        }
    }
    .tags{
        width: 100%;
        height: auto;
        padding:10px;
        background: #FFFFFF;
        border: 1px solid #BFBFBF;
        border-radius: 6px;
        .title{
            border-bottom:  3px solid #E1EAFA;
        }
    }
}
/deep/ .labelBox{
    padding: 10px 40px 10px 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 14px;
    font-family: Microsoft YaHei;
    cursor: pointer;
    box-shadow: 0px 8px 12px 0px rgba(0, 68, 239, 0.16);
    border-radius: 16px;
    color: #fff;
    box-sizing: border-box;
    &.padding-10{
        padding: 10px;
    }
    &.bgc-205fff{
        background-color: #1891FF;
    }
    &.bgc-999999{
        background-color: #999;
    }
    .round{
        position: absolute;
        right: 0;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        text-align: center;
        line-height: 34px;
        background-color: #fff;
        color: #1891FF;
    }
}
/deep/.el-collapse-item__header{
    margin-bottom:8px;
    box-shadow: 0px 8px 7px 1px rgba(30,30,30,0.3100);
}
/deep/.el-collapse-item__wrap{
    box-shadow: 0px 8px 7px 1px rgba(30,30,30,0.3100);
}
/deep/.el-icon-arrow-right:before{
    content: "";
}
/deep/.ivu-input-search{
    padding: 4px 7px !important;
}
/deep/.ivu-input{
    border-radius: 0;
}
/deep/.ivu-input-group-prepend{
    border-radius: 0;
}
/deep/.ivu-select-arrow{
    color:#fff;
}
/deep/.ivu-select-placeholder{
    padding-right: 32px;
    position: relative;
    &::before{
        content: '';
        width: 31px;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        background: var(--themeColor);
    }
}
/deep/.ivu-select-selection{
    border-radius: 0;
}
/deep/.ivu-input-group-append{
    border-radius: 0;
}
/deep/.el-collapse-item__arrow{
    color: var(--themeColor);
    font-size: 18px;
}
.userInfoPicture{
    display:flex;
    justify-content:space-between;
    padding:0 20px;
    .userImage,.userCode{
        width:120px;
        text-align:center;
        img{
            width:120px;
            height:120px;
            border-radius:6px;
        }
    }
}
#live_video{
    width: 100%;
    height: 600px;
}
</style>


